<template>
  <div class="home-content">

    <div>
      <el-button @click="toggleSelection()">全部取消选择</el-button>
      <el-select v-model="value" class="m-2" placeholder="Select" style="margin: 0 20px 0 20px">
        <el-option
          v-for="item in options"
          :key="item.typeId"
          :label="item.typeName"
          :value="item.typeId"
        />
      </el-select>
      <el-button @click="handleAddShopCar">加入购物车</el-button>
    </div>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column property="productId" label="商品编号" width="120" />
      <el-table-column property="productName" label="商品名称" width="120" />
      <el-table-column property="price" label="价格" show-overflow-tooltip />
    </el-table>
  </div>
</template>
<script>
import { ref, reactive } from 'vue'
import axios from 'axios'
export default {
  name: 'HomeContent',
  setup () {
    const tableData = ref([])
    const multipleSelection = ref([])
    // const multipleTableRef = ref([])
    const index = reactive('')
    // const arr = [
    //   {
    //     id: 1,
    //     name: '强爽',
    //     price: 6.6
    //   },
    //   {
    //     id: 1,
    //     name: '强爽',
    //     price: 6.6
    //   },
    //   {
    //     id: 1,
    //     name: '强爽',
    //     price: 6.6
    //   },
    //   {
    //     id: 1,
    //     name: '强爽',
    //     price: 6.6
    //   }
    // ]

    // tableData.value = arr

    const value = ref('全部商品')

    const options = ref([])
    const handleData = async () => {
      console.log(111)
      const resultGoods = await axios.get('http://localhost:8080/api/product/list')
      const resultOptions = await axios.get('http://localhost:8080/api/product/type/list')
      options.value = resultOptions.data.data
      tableData.value = resultGoods.data.data
    }
    handleData()
    const handleAddShopCar = async (index, rows) => {
      const item = multipleSelection.value
      const ids = []
      for (const e of item) {
        ids.push(e.productId)
      }
      console.log(ids)
      const result = await axios.post('http://localhost:8080/api/shop/car/add', ids, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      console.log(result.data.data)
    }
    const handleSelectionChange = (index, row) => {
      multipleSelection.value = index
      console.log(index)
    }
    return {
      tableData,
      value,
      options,
      handleData,
      handleAddShopCar,
      handleSelectionChange,
      index
    }
  }
}
</script>
<style lang="scss">
  .list-title {
    display: flex;
    li {
      list-style: none;
      margin-right: 20px;
    }
  }
</style>
